<!DOCTYPE html>
<html>
<head>
    <title>管理IC卡信息</title>
    <link rel="stylesheet" href="/static/assets/css/layui.css" media="all">
    <link rel="stylesheet" href="/static/assets/css/checkbox.css" media="all">
</head>
<body>
<div class="layui-input-inline">
    <input type="text" name="title" required lay-verify="required" id="icCardId" placeholder="IC卡号" autocomplete="off"
           class="layui-input">
</div>
<div class="layui-input-inline">
    <input type="text" name="title" required lay-verify="required" id="ownerId" placeholder="用户Id" autocomplete="off"
           class="layui-input">
</div>
<button type="button" class="layui-btn" id="search">查询</button>
<button type="button" class="layui-btn" id="reset">重置</button>
<button type="button" class="layui-btn" id="add">新增</button>
<table id="cardList" lay-filter="test"></table>
<script src="/static/assets/layui.all.js" charset="utf-8"></script>
<script src="/static/assets/jquery.min.js"></script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="getCheckData">删除选中行</button>
    </div>
</script>
<script>
    $(function () {

        layui.use('table', function () {
            var table = layui.table;
            //第一个实例
            table.render({
                elem: '#cardList'
                // ,height: 312
                , url: '/ICCard/selectAllByMsg' //数据接口
                , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
                , defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                    title: '提示'
                    , layEvent: 'LAYTABLE_TIPS'
                    , icon: 'layui-icon-tips'
                }]
                , title: '用户数据表'
                , cols: [
                    [ //表头
                        {type: 'checkbox', fixed: 'left'}
                        , {field: 'icCardId', title: 'IC卡ID', sort: true}
                        , {field: 'balance', title: '余额'}
                        , {field: 'ownerId', title: '用户id', sort: true}
                        , {field: 'carNum', title: '车牌号'}
                        , {field: 'parkPlaceNum', title: '车位Id'}
                        , {fixed: 'right', title: '操作', toolbar: '#barDemo'}
                    ]
                ]
                , response: {
                    statusCode: 200 //重新规定成功的状态码为 200，table 组件默认为 0
                }
                , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
                    return {
                        "code": res.code, //解析接口状态
                        "msg": res.message, //解析提示文本
                        "count": res.count, //解析数据长度
                        "data": res.data.iCcards//解析数据列表
                    };
                }
                , page: true //开启分页
                , id: "cardList"
            });

            $("#search").on("click", function () {
                var icCardId = $("#icCardId"),
                    ownerId = $("#ownerId")
                table.reload('cardList', {
                    where: { //设定异步数据接口的额外参数，任意设
                        icCardId: icCardId.val()
                        , ownerId: ownerId.val()
                    }
                    , page: {
                        curr: 1 //重新从第 1 页开始
                    }
                });
            })

            $("#reset").on("click", function () {
                location.reload()
            })

            $("#add").on("click", function () {
                layer.open({
                    type: 2,
                    title: '新增IC卡',
                    shadeClose: true,
                    shade: 0.8,
                    area: ['400px', '350px'],
                    content: '/desk/addICcard' //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
                });
            })

            table.on('tool(test)', function (obj) {
                var data = obj.data;
                if (obj.event === 'del') {
                    layer.confirm('真的删除行么', function (index) {
                        $.ajax({
                            url: "/ICCard/deleteById",
                            type: "post",
                            dataType: "json",
                            data: {icCardId: data.icCardId},
                            success: function (data) {
                                layer.msg("删除成功")
                                console.log(data)
                                table.reload('cardList', {
                                    page: {
                                        curr: 1 //重新从第 1 页开始
                                    }
                                });
                            },
                            error: function () {
                                console.log("删除失败")
                            }
                        })
                    });
                }
            });
            //头工具栏事件
            table.on('toolbar(test)', function (obj) {
                var checkStatus = table.checkStatus(obj.config.id);
                switch (obj.event) {
                    case 'getCheckData':
                        var data = checkStatus.data;
                        layer.msg('选中了：' + data.length + ' 个');
                        console.log(data)
                        break;
                    //自定义头工具栏右侧图标 - 提示
                    case 'LAYTABLE_TIPS':
                        layer.alert('这是工具栏右侧自定义的一个图标按钮');
                        break;
                }
                ;
            });
        });

    })

</script>
</body>
</html>
